<template>
	<view class="content">
		<view class="topbanner">
			<swiper class="swiper" circular autoplay='true' interval="2000" duration="500" indicator-dots="true">
				<swiper-item v-for="(img,index) in swiperimg" :key="index" :item-id="index" :data-year="index">
					<view class="swiper-item"
						:style="{background:img?('url('+ baseUrl + img.large +') center no-repeat'):'',backgroundSize:'cover'}">



					</view>
				</swiper-item>

			</swiper>
			<view class="collect" @click="collect">
				<image :src="detail.isFavorite?'/static/images/icon48.png':'/static/images/icon15.png'" mode="widthFix">
				</image>
			</view>
		</view>


		<view class="p0_30 b-line">
			<view class="cpname">
				<!-- <text class="red">UMIND系列</text> <text>双链设计</text> <text>套链</text> -->
				{{detail.name}}
			</view>
			<view class="cpmoney">
				￥{{detail.price}}
			</view>
			<!-- <view class="icon-box">
				<view class="item">
					<image src="../../static/images/icon07.png" mode="heightFix"></image>
					<view class="icon-text">
						顺丰速运
					</view>
				</view>
				<view class="item">
					<image src="../../static/images/icon08.png" mode="heightFix"></image>
					<view class="icon-text">
						门店置换
					</view>
				</view>
				<view class="item">
					<image src="../../static/images/icon09.png" mode="heightFix"></image>
					<view class="icon-text">
						7天换货
					</view>
				</view>
				<view class="item">
					<image src="../../static/images/icon10.png" mode="heightFix"></image>
					<view class="icon-text">
						两年保修
					</view>
				</view>
			</view> -->

			<view class="tips" v-if="detail.memo !== null">
				{{detail.memo}}
			</view>

		</view>

		<view class="p0_30 b-line" v-if="detail.parameterValues && detail.parameterValues.length > 0">

			<view class="l-title">细节描述</view>

			<view class="text-con">
				<view class="item" v-for="(item,index) in detail.parameterValues[0].entries" :key="index"
					:item-id="index">
					{{item.name}}：{{item.value}}
				</view>
			</view>

		</view>
		
		<view class="detail">
			<!-- <rich-text :nodes="detail.introduction"></rich-text> -->
			<rich-text :nodes="detail.afterSales"></rich-text>
		</view>

		<!-- <view class="image-text">
			<view class="ce-title">
				<view class="e-text">
					PICTURE DETAILS
				</view>
				<view class="c-text">
					图片详情
				</view>
				<view class="line"></view>
			</view>

			<view class="img-box">
				<image src="../../static/images/cp01.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="image-text">
			<view class="ce-title">
				<view class="e-text">
					PRODUCT DETAILS
				</view>
				<view class="c-text">
					作品细节
				</view>
				<view class="line"></view>
			</view>

			<view class="img-box">
				<image src="../../static/images/cp02.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="image-text">
			<view class="ce-title">
				<view class="e-text">
					DIFFERENT MATERIALS
				</view>
				<view class="c-text">
					不同材质
				</view>
				<view class="line"></view>
			</view>

			<view class="img-box">
				<image src="../../static/images/cp03.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="image-text">
			<view class="ce-title">
				<view class="e-text">
					SIZING GUIDE
				</view>
				<view class="c-text">
					测量手寸
				</view>
				<view class="line"></view>
			</view>

			<view class="img-box">
				<image src="../../static/images/cp04.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="image-text">
			<view class="ce-title">
				<view class="e-text">
					PACKAGING DISPLAY
				</view>
				<view class="c-text">
					作品包装展示
				</view>
				<view class="line"></view>
			</view>

			<view class="img-box">
				<image src="../../static/images/cp05.png" mode="widthFix"></image>
			</view>
		</view> -->

		<view class="image-text">
			<view class="ce-title">
				<view class="e-text">
					YOU MIGHT ALSO LIKE IT
				</view>
				<view class="c-text">
					你可能还喜欢
				</view>
				<view class="line"></view>
			</view>

			<view class="rec-box p0_30">
				<view class="item" v-for="(item,index) in list" :key="index" :item-id="index" :data-year="index">

					<image @click="goDetail(item.id)" class="img" :src="baseUrl + item.image.source" mode="heightFix"></image>

					<view class="name">
						{{item.name}}
					</view>
					<view class="money">¥ {{item.price}}</view>
					<view class="buy-btn" @click="buyNow(item.skuId)">立即购买</view>
				</view>
			</view>

		</view>

		<view class="fixed-k"></view>
		<view class="fixed-bottom">
			<view class="left">
				<view class="item" @click="goCart()">
					<image src="../../static/images/icon11.png" mode="widthFix"></image>
					<view class="count" v-if="cartItemsCount !== 0 && cartItemsCount < 10">{{cartItemsCount}}</view>
					<view class="count" v-if="cartItemsCount !== 0 && cartItemsCount >= 10">9+</view>
					<view class="text">购物车</view>

				</view>
				<!-- <view class="item" @click="goContact">
					<image src="../../static/images/icon12.png" mode="widthFix"></image>
					<view class="text">客服</view>

				</view> -->
				<button class="item" open-type="contact">
					<image src="../../static/images/icon12.png" mode="widthFix"></image>
					<view class="text">客服</view>
				
				</button>
			</view>
			<view class="right">
				<view class="item bg-red" @click="addCart()">
					<image src="../../static/images/icon13.png" mode="widthFix"></image>
					<view class="text">加入购物车</view>

				</view>
				<view class="item" @click="topay">
					<image src="../../static/images/icon14.png" mode="widthFix"></image>
					<view class="text">立即支付</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		productDetails,
		addLike,
		productPage
	} from '@/api/product.js';
	import {
		addCart
	} from '@/api/cart.js';
	import {
		statusCount
	} from '@/api/user.js'
	export default {
		data() {
			return {
				swiperimg: [
					'../../static/images/cpbanner.png',
					'../../static/images/cpbanner.png',
					'../../static/images/cpbanner.png'
				],
				recimage: [
					'../../static/images/cp06.png',
					'../../static/images/cp07.png',
					'../../static/images/cp08.png',
					'../../static/images/cp09.png'
				],
				id: '',
				detail: [],
				list: [],
				typeId: '',
				baseUrl: this.$baseUrl,
				cartItemsCount: 0
			};
		},
		onLoad(options) {
			this.id = options.pid || options.id
			if(options.scene && options.scene !== '') {
				this.id = options.scene
			}
			this.typeId = options.typeId || ''
			this.init();
			this.footmark();
			this.initData()
		},
		
		onShareAppMessage(e) {
			console.log(e, 1111111)
			let mpShare={
				title:'久福到家',
				path:'/pages/index/index?scene='
			}
			
			
			if(uni.getStorageSync('inviteId')){
				let inviteId=uni.getStorageSync('inviteId')
				mpShare.path='/pages/index/index?scene='+inviteId
			}
			return mpShare
		},
		methods: {
			init() {
				productDetails({
					id: this.id
				}).then(res => {
					console.log(res)
					this.detail = res.data
					this.swiperimg = res.data.productImages
					this.detail.afterSales = this.myReplace(this.detail.afterSales, '<img src="/', '<img style="width:100%!important;" src="/')
					this.detail.afterSales = this.myReplace(this.detail.afterSales, 'src="', 'src="' + this.baseUrl)
					this.detail.afterSales = this.myReplace(this.detail.afterSales, 'style="width: 750px;"', '')
				})
				
				productPage({pageNo: 1, pageSize: 4, type: 'GENERAL', recommendTypeld: this.typeId }).then(res => {
					this.list = res.data.page.list
				})
			},
			myReplace (sInput, sChar, sReplaceChar) {
			    if(sInput == '' || sInput == undefined) {
			        return ''
			    }
			    var oReg = new RegExp(sChar,'g')
			    return sInput.replace(oReg, sReplaceChar)
			},
			initData() {
				// console.log(uni.getStorageSync('login_token'))
				if(uni.getStorageSync('login_token') && uni.getStorageSync('login_token') !== '') {
					statusCount().then(res => {
						this.cartItemsCount = res.data.cartItemsCount
					})
				}
			},
			footmark() {
				var pid = this.id;
				var markarr = uni.getStorageSync("footmark");
				if (markarr == '') {
					var arr = [];
					arr.unshift(pid);
					uni.setStorageSync("footmark", arr)
				} else {
					if (markarr.indexOf(pid) == -1) { //判断是否重复
						markarr.unshift(pid);
					}
					uni.setStorageSync("footmark", markarr)
				}
			},
			goDetail(id) {
				uni.navigateTo({
					url: './details?id=' + id + '&typeId=' + this.typeId
				})
			},
			goContact() {
				wx.openCustomerServiceChat({
				  extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc1e40ab677790a516'},
				  corpId: 'wxcd74947c0b288339',
				  success(res) {}
				})
			},
			addCart() {
				addCart({
					skuId: this.detail.skus[0].id,
					quantity: 1
				}).then(res => {
					console.log(res)
					this.initData()
					uni.showToast({
						title: '添加成功',
						duration: 2000,
						icon: 'none'
					})
				})
			},
			goCart() {
				uni.switchTab({
					url: '../cart/cart',
				})
			},
			collect() {
				addLike({
					id: this.detail.id
				}).then(res => {

					uni.showToast({
						title: res.message,
						duration: 2000,
						icon: 'none'
					})
					this.init();
				})
			},
			buyNow(id) {
				uni.navigateTo({
					url: '/pages/pay/pay?quantity=1&skuId=' + id
				})
			},
			topay() {
				uni.navigateTo({
					url: '/pages/pay/pay?quantity=1&skuId=' + this.detail.skus[0].id
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.topbanner {
			position: relative;
		}

		.collect {
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.06);
			display: flex;
			align-items: center;
			justify-content: center;
			top: 30rpx;
			right: 30rpx;

			image {
				width: 38rpx;
			}
		}

		.swiper {
			height: 600rpx;

			swiper-item {
				height: 100%;

				.swiper-item {
					margin: 0 25rpx;
					height: 100%;
				}
			}
		}

		.b-line {
			padding-top: 60rpx;
			padding-bottom: 60rpx;
			border-bottom: 15rpx solid #efefef;
		}

		.cpname {
			margin-bottom: 30rpx;

			text {
				letter-spacing: 6rpx;
				font-size: 36rpx;
				margin-right: 10rpx;
			}

			.red {
				color: #b81c22;
			}
		}

		.cpmoney {
			margin-bottom: 60rpx;
			color: #000000;
			font-size: 24rpx;
		}

		.icon-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 180rpx;
			background-color: #efefef;
			border-radius: 20rpx;
			padding: 0 60rpx;
			margin-bottom: 30rpx;

			.item {
				text-align: center;

				image {
					height: 40rpx;
					margin-bottom: 20rpx;
				}

				.icon-text {
					font-size: 24rpx;
					letter-spacing: 2rpx;
					color: #595757;
				}
			}

		}

		.tips {
			color: #898989;
			font-size: 18rpx;
		}


		.l-title {
			font-size: 30rpx;
			letter-spacing: 2rpx;
			color: #232730;
			margin-bottom: 40rpx;
		}

		.text-con {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			.item {
				width: 50%;
				color: #898989;
				font-size: 28rpx;
				line-height: 2;
			}
		}

		.image-text {
			padding-top: 60rpx;

			.ce-title {
				text-align: center;
				margin-bottom: 60rpx;

				.e-text {
					font-size: 30rpx;
					letter-spacing: 6rpx;
					color: #3e3a39;
					margin-bottom: 20rpx;
				}

				.c-text {
					font-size: 30rpx;
					letter-spacing: 6rpx;
					color: #3e3a39;
					margin-bottom: 20rpx;
				}

				.line {
					width: 160rpx;
					height: 3px;
					background-color: #e6e6e6;
					position: relative;
					margin: auto;
				}

				.line::after {
					position: absolute;
					content: '';
					left: 0;
					top: 0;
					height: 100%;
					width: 25rpx;
					background-color: #c10016;
				}


			}

			.rec-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					width: 50%;
					text-align: center;
					margin-bottom: 80rpx;

					.img {
						margin-bottom: 50rpx;
						height: 170rpx;
					}

					.name {
						margin-bottom: 15rpx;
					}

					.money {
						margin-bottom: 40rpx;
					}

					.buy-btn {
						width: 150rpx;
						height: 44rpx;
						line-height: 40rpx;
						text-align: center;
						border: solid 1px #000000;
						font-size: 18rpx;
						color: #1b1b1b;
						margin: auto;
					}
				}



			}
		}


		.fixed-k {
			height: 120rpx;
		}

		.fixed-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			background-color: #efefef;

			.left {
				width: 38%;
				display: flex;
				align-items: center;
				height: 100%;
			}

			.right {
				width: 62%;
				display: flex;
				align-items: center;
				height: 100%;
			}

			.item {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				text-align: center;
				height: 100%;
				
				position: relative;

				.text {
					font-size: 28rpx;
				}
				
				&::after{
					border:none;
				}
				
				.count {
					position: absolute;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					color: #fff;
					line-height: 30rpx;
					text-align: center;
					top: 12rpx;
					right: 12rpx;
					background-color: #C10016;
					font-size: 18rpx;
				}
			}
			

			.bg-red {
				background-color: #b81c22;
				color: #fff;
			}

			image {
				width: 30rpx;
				margin-bottom: 15rpx;
			}
		}

	}
	
	.detail {
		margin-top: 60rpx;
		overflow-x: hidden;
	}
</style>
